<template>
    <div class="drug-right">   
        <crown-outlined class="yell-icon" />
        <span class="range">本周药品销售收排行</span>
       <table class="raqnge-bottom" >
        <tr v-for="(item,index) in tableArr" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.code }}</td>
            <td>{{ item.drugname }}</td>
            <td @click="addArr(item)">添加</td>
        </tr>
       </table> 
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { CrownOutlined } from '@ant-design/icons-vue';
import Bus from "../../../mitt/index"
export default defineComponent({
    components:{CrownOutlined},
    setup () {
        const tableArr=[
            {id:1,code:100001,drugname:"兰索拉唑肠溶片"},
            {id:2,code:100002,drugname:"甲钴胺片"},
            {id:3,code:100003,drugname:"复方求唑沙宗奥囊"},
            {id:4,code:100004,drugname:"对乙酰氨基酚片"},
            {id:5,code:100005,drugname:"双嘧达莫片"},
            {id:6,code:100006,drugname:"阿莫西林胶囊"},
            {id:7,code:100007,drugname:"骨肽注射液"},
            {id:8,code:100008,drugname:"双氯芬酸钠肠溶片"},
            {id:9,code:100009,drugname:"滴眼用利福平"},
            {id:10,code:100010,drugname:"红霉素眼膏"},
        ]
        const addArr =(item:any)=>{
            Bus.emit("addDrug",item)
        }
        return {tableArr,addArr}
    }
})
</script>

<style scoped lang="less">
.drug-right{
    width:37%;
    height:500px ;
    // background-color: pink;
}
.yell-icon{
    color: #f8d63c;
    font-size: 16px;
}
.range{
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
}
.range-ul{
    padding-right: 30px;
    width: 500px;
}
/deep/.range-ul>li{
    // padding: 10px 20px;
    box-sizing: border-box;
    list-style-type:decimal;
    list-style-position:inside;
    width: 100%;
    display: flex;
    line-height: 28px;
    justify-content: space-between;
    font-size: 16px;
    border: 1px solid #eee;
    margin: 15px 0px 15px 20px;
}
.raqnge-bottom{
    width:540px;
    margin-top: 20px;
}
.raqnge-bottom>tr{
    width: 100%;
}
.raqnge-bottom>tr>td{
    text-align: center;
    width: 150px;
    height: 46px;
    font-size: 17px;
    line-height: 46px;
}
.raqnge-bottom>tr>td:nth-child(1){
    width:80px;
    color: #666ee8;
    font-weight: bold;
    font-size: 20px;
}
.raqnge-bottom>tr>td:nth-child(4){
    color: #666ee8;
    cursor: pointer;
}
// .range-left{
//     line-height: 45px;
//     color:#666ee8;
//     font-size: 23px;
//     text-align: center;
//     width: 30px;
// }
// .range-ul>li>span:nth-child(3){
//     color: #8d93ec;
//     cursor: pointer;
// }
</style>